<link href="/static/css/tree.css" rel="stylesheet" type="text/css">
<!-- ## 第一层是nameserver 的列表, 他的children 是topic -->
{% for topic_group in treeNodes %}
    <div class="row">
        <div class="col-lg-12" >
            <ol class="breadcrumb,  bg-{{ topic_group.color }}" >
                <li class="active ">
                    <i class="glyphicon glyphicon-flag"></i>  <i class="fa fa-quote-left "></i> &nbsp; {{ topic_group.tree_group_name }} &nbsp;   <i class="fa fa-quote-right "></i>
                </li>
            </ol>
        </div>
    </div>
    <div class="tree">
        <ul>
            <!-- ## 第二层是topic, 他的children 每一个里面有三个固定的, 分别是一个brokerDatas 的列表, 一个 filterServerTable, 一个queueDatas 列表-->
            {% for tpoic in topic_group.children %}
                <li>
                    <span class="bg-{{ tpoic.color }}"><i class="glyphicon glyphicon-minus-sign "></i> {{ tpoic.node_id }}</span>

                    <span class="label label-info"> <i class="fa fa-quote-left "></i>  &nbsp;{{ tpoic.desc }} &nbsp; <i class="fa fa-quote-right "></i> </span>
                    <ul>
                        <!-- ## brokerDatas 的列表, 一个 filterServerTable, 一个queueDatas 列表 -->
                        {% for data in tpoic.children %}
                            <li>
                    <span class="bg-{{ data.color }}"><i
                            class="glyphicon glyphicon-minus-sign"></i> {{ data.node_id }}</span>
                                <ul>
                                    <!-- ##    -->
                                    {% if data.children %}
                                        {% for tmp in data.children %}
                                            <li>
                                                <span  class="bg-{{ tmp.color }}"><i class="glyphicon glyphicon-minus-sign "></i> {{ tmp.node_id }}</span>
                                                  <span class="label label-info">  <i class="fa fa-quote-left "></i> &nbsp;{{ tmp.desc }}  &nbsp;<i class="fa fa-quote-right "></i> </span>
                                                <ul>

                                                    {% if tmp.children %}
                                                        {% for temp in tmp.children %}
                                                            <li>
                                                                <span   class="bg-{{ temp.color }}" ><i
                                                                        class="glyphicon glyphicon-minus-sign"></i> {{ temp.node_id }}</span>
                                                                <span class="label label-info">   <i class="fa fa-quote-left "></i>&nbsp;{{ temp.desc }}&nbsp;  <i class="fa fa-quote-right "></i> </span>
                                                            </li>
                                                        {% endfor %}
                                                    {% endif %}
                                                </ul>
                                            </li>
                                        {% endfor %}
                                    {% endif %}
                                </ul>
                            </li>
                        {% endfor %}

                    </ul>
                </li>

            {% endfor %}
        </ul>
    </div>


{% endfor %}